<body>
    <div class="about-container">
        <div class="about-main">
            <div class="about-part">
                <div class="about-para">
                    <span class="about-para-symbol"></span>
                    <p class="about-para-text">
                        The explorer was used as teaching material for a workshop on data videos 
                        in iDVX Lab, Tongji Univesity, 2020. The goal of the workshop was to evaluate 
                        the effectiveness of our design space, which systematically describes design 
                        patterns in data videos. The design space combines a dimension for animation 
                        techniques that are frequently used to facilitate data communication with one 
                        for visual narrative strategies served by such animation techniques to support 
                        story presentation.
                    </p>
                </div>
                <div class="about-para">
                    <span class="about-para-symbol"></span>
                    <p class="about-para-text">
                        Our explorer presents 43 method cards, each of which describes one animation 
                        technique. The design of the cards was inspired by the Napa Cards and IDEO Method 
                        Cards. Each chard shows its name, a GIF demo, and a brief description (how to use 
                        it, why it is useful, what are applicable visualization techniques) on its front 
                        and an exemplar data video on its back. The color of each card encodes the category 
                        of its narrative strategy while the icon beside the card name denotes the 
                        corresponding editorial layer. If a certain animation technique is categorized into 
                        multiple narrative strategies, its card will be encoded in a multiple-color blend.
                    </p>
                </div>
                <div class="about-para">
                    <span class="about-para-symbol"></span>
                    <p class="about-para-text">
                        Our explorer also shows the corpus of data videos we coded for constructing the 
                        design space. The corpus is of 82 high-quality data videos and is released to 
                        support the development of future data video authoring tools.
                    </p>
                </div>
            </div>
    
            <div class="about-part" id="team">
                <div class="about-title">
                    <div class="about-title-head">Our Team</div>
                    <p class="about-title-text">
                        We are designers, engineers, creators, all unified to understand and explore 
                        design patterns in visual storytelling.
                    </p>
                </div>
                <div class="about-album">
                    <div class="album">
                        <div class="album-card">
                            <img class="album-card-img" src="./assets/image/Xingyu_Lan.png" alt="">
                            <div class="album-card-body">
                                <div class="album-card-role">Lead Designer</div>
                                <div class="album-card-name">Xingyu Lan</div>
                            </div>
                        </div>
                        <div class="album-card">
                            <img class="album-card-img" src="./assets/image/Jingwen_Li.png" alt="">
                            <div class="album-card-body">
                                <div class="album-card-role">Designer</div>
                                <div class="album-card-name">Jingwen Li</div>
                            </div>
                        </div>
                        <div class="album-card">
                            <img class="album-card-img" src="./assets/image/Zhaorui_Li.png" alt="">
                            <div class="album-card-body">
                                <div class="album-card-role">Designer</div>
                                <div class="album-card-name">Zhaorui Li</div>
                            </div>
                        </div>
                        <div class="album-card">
                            <img class="album-card-img" src="./assets/image/Kailun_Jin.png" alt="">
                            <div class="album-card-body">
                                <div class="album-card-role">Web Developer</div>
                                <div class="album-card-name">Kailun Jin</div>
                            </div>
                        </div>
                        <div class="album-card">
                            <img class="album-card-img" src="./assets/image/Yang_Shi.png" alt="">
                            <div class="album-card-body">
                                <div class="album-card-role">Advisor</div>
                                <div class="album-card-name">Yang Shi</div>
                            </div>
                        </div>
                        <div class="album-card">
                            <img class="album-card-img" src="./assets/image/Nan_Cao.png" alt="">
                            <div class="album-card-body">
                                <div class="album-card-role">Advisor</div>
                                <div class="album-card-name">Nan Cao</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    
            <div class="about-part" id="citation">
                <div class="about-title">
                    <div class="about-title-head">Citation</div>
                    <p class="about-title-text">Citation is given to the following publication:</p>
                </div>
                <div class="about-para">
                    <span class="about-para-symbol"></span>
                    <p class="about-para-text">
                        Yang Shi, Xingyu Lan, Jingwen Li, Zhaorui Li, Nan Cao. 2021. Communicating with 
                        Motion: A Design Space for Animated Visual Narratives in Data Videos. In 
                        Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems. 
                    </p>
                </div>
                <div class="citation-format">
                    @InProceedings{
                            shi2021motion,
                            title = {Communicating with Motion: A Design Space for Animated Visual Narratives in Data Videos },
                            author = {Shi, Yang and Lan, Xingyu and Li, Jingwen and Li, Zhaorui and Cao, Nan},
                            booktitle = {Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems},
                            year = {2021}
                        }
                </div>
            </div>
        </div>
        <footer>
            <div class="footer-text">
                Copyright © Intelligent Big Data Visualization Lab (iDV<sup>x</sup> Lab) All Rights Reserved.
            </div>
        </footer>
    </div>
</body>